<template>
  <scroll-view scroll-y="true" class="my-exer">
    <uni-search-bar
      v-model="queryForm.keyword"
      placeholder="请输入题干关键字进行搜索"
      :focus="false"
      @confirm="getData()"
      @cancel="
        queryForm.keyword = '';
        getData();
      "
    ></uni-search-bar>
    <uni-list class="list_content ldBg" >
      <view
        v-for="(item, index) in listpage.list"
        class="card data_card"
        bindtap="click"
        :key="item.questionId"
      >
        <!-- 包裹两行文字 -->
        <view @click="toExer(item)" v-if="index<=2" >
          <view class="title" v-html="item.title"></view>
          <view class="question-type" v-html="item.questionTypeName"></view>
        </view>
		<view @click="toExer(item)" v-else @touchmove.stop @touch.stop>
		  <view class="title" v-html="item.title"></view>
		  <view class="question-type" v-html="item.questionTypeName"></view>
		</view>
      </view>
      <uni-load-more
        class="myLoad"
        :status="listpage.status"
        v-show="listpage.list.length > 0"
        :contentText="{
          contentdown: '点击加载更多',
          contentrefresh: '加载中',
          contentnomore: '到底了',
        }"
        @clickLoadMore="query(true)"
      ></uni-load-more>
      <view v-show="listpage.list.length <= 0">
        <text class="no-content">请输入查询条件进行检索</text>
      </view>
    </uni-list>
  </scroll-view>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { SearchQuestion } from "@/ts";
import http from "@/utils/request";

const queryForm = reactive({
  // 查询表单
  keyword: "", // 名称
});
const listpage = reactive({
  list: [] as SearchQuestion[],
  curPage: 1,
  pageSize: 50,
  total: 0,
  status: "more",
});

// 页面加载完毕，执行如下方法
onLoad(async () => {
  // search();
});
onPullDownRefresh(async () => {
  //根据选中的选项卡，刷新数据
  getData();
});
onReachBottom(() => {
  if (listpage.status === "more") {
    query(true);
  }
});
const getData = () => {
  //从第一页开始

  listpage.curPage = 1;
  //清除原有数据
  listpage.list = [];

  query(false); // 正式考试
};
function changeColor(result) {
  result.map((item, index) => {
    if (queryForm.keyword) {
      let replaceReg = new RegExp(queryForm.keyword, "ig");
      let replaceString = `<span style="color: #ff0000">${queryForm.keyword}</span>`;
      result[index].title = item.title.replace(replaceReg, replaceString);
    }
  });
  return result;
}
async function query(append) {
  if (queryForm.keyword == "") {
    uni.showToast({
      title: "请输入题干关键字检索",
      icon: "none",
      duration: 1500,
    });
    listpage.list = [];
    uni.stopPullDownRefresh();
    return;
  } else {
    listpage.status = "loading";
    if (append) {
      listpage.curPage++;
    } else {
      listpage.curPage = 1;
    }
    uni.showToast({
      title: "加载中……",
      icon: "loading",
      duration: 300,
    });
    const { code, data } = await http.post("search/searchQuestion", {
      ...queryForm,
      curPage: listpage.curPage,
      pageSize: listpage.pageSize,
    });
    if (code !== 200) {
      return;
    }
    uni.stopPullDownRefresh();
    listpage.total = data.total;
    if (append) {
      if (data.list.length) {
        let arr = changeColor(data.list);
        listpage.list.push(...arr);
      }
    } else {
      let arr = changeColor(data.list);
      listpage.list = arr;
    }
    if (listpage.list.length < listpage.total) {
      listpage.status = "more";
    } else {
      listpage.status = "no-more";
    }
  }
}
// 去练习
async function toExer(item: SearchQuestion) {
  console.log(item);
  uni.navigateTo({
    url: `/pages/search/searchPage?questionId=${item.questionId}&questionTypeName=${item.questionTypeName}`,
  });
}
</script>
<style scoped>
.list_content {
  height: calc(100vh - 0rpx);
  overflow-y: auto;
  margin-bottom: 260rpx;
}
/* 卡片圆角 阴影效果*/
.card {
  margin: 10rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
}
.title {
  margin: 10rpx;
  align-items: left;
  font-size: 30rpx;
  font-weight: 400;
}
.question-type {
  margin: 10rpx;
  display: flex;
  justify-content: right;
  font-size: 25rpx;
  color: gray;
}
.no-content {
  margin: 30rpx;
  display: flex;
  justify-content: center;
  font-size: 25rpx;
  color: gray;
}
</style>
